let Jpins = ['10元话费券', '15元话费券', '5元话费券', '腾讯视频会员月卡', 'QQ音乐会员月卡', '网易云音乐会员月卡', '爱奇艺视频会员月卡', '继续努力']
let Lis = document.querySelectorAll('li:not(.btn)') // 获取奖品项
Lis = Array.from(Lis)
Lis.splice(Lis.length, 0, Lis[7], Lis[6], Lis[5], Lis[3])
Lis.splice(3, 1)
Lis.splice(4, 3)

// console.log(Lis);
let btn = document.querySelector('.btn') // 抽奖按钮
let time1_, time2_, time3_ //三个阶段
let n, nEnd, nEnd2
let start = true
btn.onclick = function () {
    if (start) {
        start = false
        timeFun()
    }
}
//修改样式
function cssBack() {
    let num = Lis.findIndex(function (item, index) {
        return item.className == 'back'
    })
    if (num == '-1') {
        Lis[0].classList.add('back')
    } else {
        Lis[num].classList.remove('back')
        if (num == Lis.length - 1) num = -1
        Lis[num + 1].classList.add('back')
    }
}
//时间循环
function timeFun() {
    n = 0
    nEnd = parseInt(Math.random() * 20) + 20
    nEnd2 = parseInt(Math.random() * 4) + 8
    time1()
}
//初始与结束
function time1() {
    time1_ = setTimeout(() => {
        cssBack()
        n++
        if (n == 5) {
            clearTimeout(time1_)
            n = 0
            time2()
        } else {
            time1()
        }
    }, 200);
}
//中间
function time2() {
    time2_ = setTimeout(() => {
        cssBack()
        n++
        if (n == nEnd) {
            clearTimeout(time2_)
            n = 0
            time3()
        } else {
            time2()
        }
    }, 100);
}
//结束
function time3() {
    time3_ = setTimeout(() => {
        cssBack()
        n++
        if (n == nEnd2) {
            clearTimeout(time3_)
            setTimeout(() => {
                let num2 = Lis.findIndex(function (item, index) {
                    return item.className == 'back'
                })
                alert(`你的奖品为：${Jpins[num2]}`)
                start = true
            }, 100);
        } else {
            time3()
        }
    }, 400);
}
b4.onclick = function () {
    document.querySelector("#pic").src = "./img/a.jpg"
}
b5.onclick = function () {
    document.querySelector("#pic").src = "./img/b.jpeg"
}
b6.onclick = function () {
    document.querySelector("#pic").src = "./img/c.jpg"
}